<template>
  <div>
    <h2>login</h2>
    <img id="login-background" src="../assets/img/cataline.jpg" alt="">
    <div id="login-box">
      <div id="login-account">
        <span>账号：</span>
        <input id="count-input" v-model.number="account" type="text">
      </div>
      <div id="login-password">
        <span>密码：</span>
        <input id="password-input" v-model="password" type="text">
      </div>
      <div id="button-box">
        <button id="login-button" @click="Login()">登录</button>
        <button id="register-button" @click="Register()">注册</button>
      </div>
    </div>

    <el-drawer
      title=""
      :visible.sync="drawer"
      :with-header="true">
      <div>
        <div style="margin: 20px;"></div>
        <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
          <el-form-item label="memberId">
            <el-input v-model="formLabelAlign.userName"></el-input>
          </el-form-item>
          <el-form-item label="memberId">
            <el-input v-model="formLabelAlign.userPassword"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <button @click="RegisterConfirm()">确认注册</button>
    </el-drawer>

  </div>
</template>

<script>
import {request} from "../network/request";
import axios from "axios";

export default {
  name: "login",
  data() {
    return {
      account: 100000,
      password: '111111',
      drawer: false,
      labelPosition: 'right',
      formLabelAlign: {
        userId: 0,
        userName: "",
        userPassword: "",
        userPower: 1,
        userStatus: 0,
      },
    }
  },
  methods: {
    Login() {
      // 向后端发送请求 axios
      request({
        url: '/user/login',
        params: {
          userId: this.account,
          userPassword: this.password
        }
      }).then(res => {
        const data = res
        // 对返回体进行一些处理 然后一直携带权限
        // 根据userpower来分配权限

        if (!data.msg) {
          // vuex本地存储userPower 判定权限
          this.$store.commit('assignPower', data.user.userPower)
          this.$store.commit('assignUserName', data.user.userName)
          this.$store.commit('assignUserId', data.user.userId)
          this.$store.commit('assignUserStatus', data.user.userStatus)
          this.$router.replace("/team")
          if (data.user.userStatus == 1) {
            alert("你被封号了")
            this.$router.push('/login');
          }
        } else {
          alert('账号或密码错误')
        }
      }).catch(err => {
        console.log(err)
      })
    },
    Register() {
      this.drawer = true

    },
    RegisterConfirm() {
      const json = this.formLabelAlign
      axios.post('http://localhost:8081/teams/user/save', json)
        .then(res => {
          this.location.reload()
        })
        .catch(Error => {

        })
    }
  },
}
</script>

<style scoped>
#login-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

span {
  color: white;
}

#login-box {
  position: absolute;
  top: 25%;
  left: 36%;
  background: url("../assets/img/cataline.jpg");
  width: 30%;
  height: 40%;
  border-radius: 19px;
}

#login-account {
  height: 25%;
  width: 80%;
  margin: 10% auto 0 auto;
}

#login-password {
  height: 25%;
  width: 80%;
  margin: 0 auto;
}

#count-input {
  outline: none;
  border: 0;
  height: 40%;
  width: 70%;
}

#password-input {
  outline: none;
  border: 0;
  height: 40%;
  width: 70%;
}

#button-box {
  width: 30%;
  height: 10%;
  margin: 0 auto;
}

#login-button {
  width: 40%;
  height: 100%;
  outline: none;
  border: 0;
  background-color: white;
}

#register-button {
  width: 40%;
  height: 100%;
  outline: none;
  border: 0;
  background-color: white;
}
</style>
